<style scoped>
  h2 {
    font-size: 22px;
    border-left: 2px solid #58b957;
    padding-left: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .el-container {
    display: block;
    background-color: #fff;
    border-radius: 5px;
    padding: 20px;
    padding-bottom: 100px;
  }

  .el-input {
    width: 200px;
  }

  span {
    margin-right: 10px;
  }

  .item > div {
    margin-top: 10px;
  }

  .el-button {
    margin-top: 50px;
  }
</style>
<template>
  <el-container>
    <div>
      <h2>单个图表最大记录数设置(不超过200)</h2>
      <span>记录数</span>
      <el-input v-model='data.maxrecord'>
        <template slot="append">条</template>
      </el-input>
    </div>
    <div>

      <div v-for='item in data.parameters'>
        <div class='item'>
          <h2>{{item.name}}</h2>
          <div>
            <span>最大值</span>
            <el-input v-model=item.max>
              <template slot="append">{{item.unit}}</template>
            </el-input>
          </div>
          <div>
            <span>最小值</span>
            <el-input v-model=item.min>
              <template slot="append">{{item.unit}}</template>
            </el-input>
          </div>
        </div>
      </div>
    </div>
    <el-button type="success" @click='postData'>保存</el-button>
  </el-container>
</template>
<script>
  export default {
    data() {
      return {
        data: {}
      }
    },
    mounted() {
      const that = this;
      this.$http.get(that.$url + 'getParameters')
        .then(function (response) {
          that.data = response.data;
        })
        .catch(function (error) {
          that.$message({
            message: '获取数据失败',
            type: 'error'
          });
        });
    },
    methods: {
      postData() {
        const that = this;
        this.$http.post(that.$url + 'setParameters', that.data)
          .then(function (response) {
            that.$message({
              message: '保存成功',
              type: 'success'
            });
          })
          .catch(function (error) {
            that.$message({
              message: '保存失败',
              type: 'error'
            });
          });
      }
    }
  }
</script>
